<template>
  <div :style="screenHeight">
    <!-- header -->
    <div class="nav-container page-component">
      <!--左侧导航 #start -->
      <div class="nav ">
        <div class="nav-item">
          <span class="v-link clickable dark" onclick="javascript:window.location='/user'">实名认证 </span>
        </div>
        <div class="nav-item">
          <span class="v-link clickable dark" onclick="javascript:window.location='/order'"> 挂号订单 </span>
        </div>
        <div class="nav-item ">
          <span class="v-link clickable dark" onclick="javascript:window.location='/patient'"> 就诊人管理 </span>
        </div>
        <div class="nav-item selected">
          <span class="v-link selected dark" onclick="javascript:window.location='/user/update'"> 修改账号信息 </span>
        </div>
        <div class="nav-item ">
          <span class="v-link clickable dark"> 意见反馈 </span>
        </div>
      </div>
      <!-- 左侧导航 #end -->

      <div class="page-container" style="position:absolute;top:0px;width: 500px;">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <h2>修改账号信息</h2>
          <el-form-item label="当前邮箱" prop="eamil2">
            <el-input v-model="ruleForm.eamil2" disabled autocomplete="off"></el-input>

          </el-form-item>
          <el-form-item label="修改邮箱" prop="eamil"
                        :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
          >
            <el-input v-model="ruleForm.eamil" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="pass">
            <el-input v-model="ruleForm.pass" autocomplete="off">
              <template slot="append">{{ time }}</template>
            </el-input>

          </el-form-item>

          <el-form-item>

            <el-button type="primary" @click="submitForm('ruleForm')">{{ submitText }}</el-button>

            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>

  </div>
</template>


<script>
import '~/assets/css/hospital_personal.css'
import '~/assets/css/hospital.css'

import userInfoApi from "@/api/user/userInfo";
import smsApi from "@/api/sms/sms";

export default {
  data() {

    var validatePass = (rule, value, callback) => {
      if (this.isVerification && value === '') {
        callback(new Error('请输入验证码'));
      } else {
        if (this.ruleForm.eamil !== '') {
          this.$refs.ruleForm.validateField('eamil');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入邮箱'));
      } else {
        callback();
      }
    };
    return {
      screenHeight: 'height:'+618+'px', // 屏幕宽
      height:0,
      ruleForm: {
        pass: '',
        eamil: '',
        eamil2: ''
      },
      rules: {
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        eamil: [
          {validator: validatePass2, trigger: 'blur'}
        ]
      },
      isVerification: false,
      submitText: '发送验证码',
      time: 120,
      clearSmsTime: null
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.isVerification) {
            //验证码验证成功
            userInfoApi.updateUserMail(this.ruleForm).then(response => {
              console.log("邮箱修改成功数据",response.data)
              this.$router.go(-2)
              // 修改成功
            })

          } else {
            this.Datetime()
            //还没验证，发送验证码
            smsApi.sendCode(this.ruleForm.eamil).then(response => {
              console.log("验证码数据", response.data)
              this.isVerification = true
              this.submitText = '修改邮箱'


            })
          }
          // alert('submit!' + formName);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      // this.$refs[formName].resetFields();
      this.ruleForm.eamil = ''
      this.ruleForm.pass = ''
      this.submitText = "发送验证码"
      this.isVerification = false
      clearInterval(this.clearSmsTime);
    },
    Datetime() {
      this.clearSmsTime = setInterval(() => {
        --this.time;
        if (this.time < 1) {
          clearInterval(this.clearSmsTime);
          // this.dialogAtrr.sending = true;
          this.isVerification = false
          this.submitText = '重新发送验证码'
          this.this.time = 0;
        }
      }, 1000);
    }
  },
  created() {
    userInfoApi.getUserInfo().then(response => {
      console.log("返回邮箱数据", response.data)
      this.ruleForm.eamil2 = response.data.phone
    })
    // this.height=document.body.clientHeight-100
    // console.log("搞",this.screenHeight)
  }
}
</script>
